<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>历史反馈信息列表</span>
            </div>
        </template>

        <el-table :data="tableData" style="width: 100%" height="480" :row-class-name="tableRowClassName">
            <el-table-column type="expand">
                <template #default="props">
                    <el-timeline style="width:500px;margin-left:50px;">
                        <el-timeline-item :timestamp="props.row.createTime" placement="top" type="success" size="large" :icon="Select">
                            <el-card shadow="hover">
                                <h3>提交反馈时间</h3>
                                <p style="margin-top:10px;">{{ props.row.createTime }}</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item size="large" placement="top" :timestamp="props.row.updateTime" :type="props.row.updateTime ? 'success' : 'warning'" :icon="props.row.updateTime ? Select : SemiSelect">
                            <el-card v-if="props.row.updateTime" shadow="hover">
                                <h3>更新时间</h3>
                                <p style="margin-top:10px;">{{ props.row.updateTime }}</p>
                            </el-card>
                            <el-card v-else shadow="hover">
                                <h3>尚未更新</h3>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="编号" width="80px" />
            <el-table-column prop="rankId" label="预估污染等级">
                <template #default="scope">
                    <p v-if="scope.row.rankId == '1'" style="color: #67c23a">优（一）</p>
                    <p v-if="scope.row.rankId == '2'" style="color: #ffff00">良好（二）</p>
                    <p v-if="scope.row.rankId == '3'" style="color: #ffa500">轻度污染（三）</p>
                    <p v-if="scope.row.rankId == '4'" style="color: #ff0000">中度污染（四）</p>
                    <p v-if="scope.row.rankId == '5'" style="color: #800080">重度污染（五）</p>
                    <p v-if="scope.row.rankId == '6'" style="color: #800000">严重污染（六）</p>
                    <p v-if="!scope.row.rankId">未知</p>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="反馈日期" />
            <el-table-column prop="userName" label="用户名称" />
            <el-table-column prop="gridId" label="网格编号" />
            <el-table-column prop="provinceName" label="省" />
            <el-table-column prop="cityName" label="市" />
            
            <el-table-column prop="isAssigned" label="指派状态">
                <template #default="scope">
                    <p v-if="scope.row.isAssigned == '0'" style="color: #f89898"><el-icon :style="iconStyle">
                        <CircleCloseFilled />
                    </el-icon>尚未指派</p>
                    <p v-if="scope.row.isAssigned == '1'" style="color: #95d475"><el-icon :style="iconStyle">
                        <SuccessFilled />
                    </el-icon>已指派</p>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="text-align: -webkit-center">
            <div style="margin-right: 30px;">
                <el-config-provider :locale="locale">
                    <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:pageSize="pageSize"
                        :total="total"
                        :small="small"
                        :pageSizes="[6, 7, 8, 9, 10]"
                        :background="background"
                        layout="prev, pager, next, jumper, sizes, total"
                        @current-change="handleCurrentChange"
                        @size-change="handleCurrentChange"
                        style="width: max-content; margin-top: 35px"
                    />
                </el-config-provider>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import $axios from '../utils/axios'
import { CircleCloseFilled, SuccessFilled, Select, SemiSelect, CloseBold } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : ''
}

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10) // 修改初始值为合理的每页记录数
const total = ref(0) // 确保初始值为0
const background = ref(true)
const small = ref(false)

const form = ref({})
const sId = sessionStorage.getItem('id')

const handleCurrentChange = async () => {
    form.value.sId = sId
    form.value.pageNum = currentPage.value
    form.value.pageSize = pageSize.value
    const path = '/api/supervisor/feedbackBySidByPage'
    const { data: res } = await $axios.post(path, form.value)
    if (res.code === '200') {
        tableData.value = res.data.list // 确保正确访问分页数据
        total.value = res.data.total // 确保 total 值被正确设置
        console.log("tableDatav"+tableData.value)
        console.log("totalV"+total.value)
    }
    for (let index = 0; index < tableData.value.length; index++) {
        tableData.value[index].id = index + 1
    }
    console.log(tableData.value, sId)
}

// 在组件挂载时调用一次 handleCurrentChange 来加载初始数据
onMounted(() => {
    handleCurrentChange()
})
</script>

<style scoped>
.box-card {
    width: 99%;
    height: 95%;
    margin-top: 12px;
    border-radius: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
